<nz-card>
  <div class="opera-wrap">
    <button
      nz-button
      nzType="primary"
      (click)="showClassifyModal()"
    >添加分类</button>
  </div>

  <div class="pagination-wrap-position p-t-15">
    <nz-table
      #basicTable
      nzSize="small"
      nzBordered
      [nzFrontPagination]="false"
      [nzShowPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
    >
      <thead>
        <tr>
          <th nzAlign="center">排序</th>
          <th nzAlign="center">名称</th>
          <th nzAlign="center">状态</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- 排序 -->
          <td nzAlign="center">
            <b>{{ index + 1 }}</b>
          </td>
          <!-- 名称 -->
          <td nzAlign="center" class="td-list-wrap">
            <tr>
              <td class="game-list-td">
                <b>{{ data.name || '-' }}</b>
              </td>
            </tr>

            <tr *ngFor="let gData of data.gameAppList">
              <td class="game-list-td game-li-td">
                <img
                  nz-image
                  width="32px"
                  height="32px"
                  [nzSrc]="gData.icon"
                  [nzFallback]="fallback"
                  alt=""
                />
                <span class="p-l-10">{{ gData.name || '-' }}</span>
              </td>
            </tr>
          </td>
          <!-- 状态 -->
          <td nzAlign="center" class="td-list-wrap">
            <tr>
              <td class="game-list-td game-list-td-center">
                <span [ngStyle]="{'color': data.state === 0 ? '#67C23A' : '#F56C6C'}">
                  {{ data.state === 0 ? '启用' : '禁用' }}
                </span>
              </td>
            </tr>

            <tr *ngFor="let gData of data.gameAppList">
              <td class="game-list-td game-list-td-center game-li-td">-</td>
            </tr>
          </td>
          <!-- 操作 -->
          <td nzAlign="center" class="td-list-wrap">
            <tr>
              <td class="game-list-td game-list-td-center">
                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  [disabled]="index === 0"
                  (click)="moveOrderItem(data, 1)"
                >上移</button>

                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  [disabled]="(index + 1) === tableParams.tableData.length"
                  (click)="moveOrderItem(data, 0)"
                >下移</button>

                <button
                  [ngStyle]="{'color': data.state === 0 ? '#F56C6C' : '#67C23A'}"
                  nz-button
                  nzType="link"
                  nzSize="small"
                  nz-popconfirm
                  [nzPopconfirmTitle]="'确认' + (data.state === 0 ? '禁用' : '启用') + '?'"
                  (nzOnConfirm)="stateChange(data)"
                >{{ data.state === 0 ? '禁用' : '启用' }}</button>

                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  (click)="showClassifyModal(data)"
                >编辑</button>

                <button
                  style="color: #E6A23C;"
                  nz-button
                  nzType="link"
                  nzSize="small"
                  (click)="showAddGanmeModal(data)"
                >关联</button>

                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认删除?"
                  (nzOnConfirm)="deleteItem(data)"
                >删除</button>
              </td>
            </tr>

            <tr *ngFor="let gData of data.gameAppList; let gIndex = index;">
              <td class="game-list-td game-list-td-center game-li-td">
                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  [disabled]="gIndex === 0"
                  (click)="moveGameApp(data, gIndex, (gIndex - 1))"
                >上移</button>

                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  [disabled]="gIndex === (data.gameAppList.length - 1)"
                  (click)="moveGameApp(data, gIndex, (gIndex + 1))"
                >下移</button>

                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认删除?"
                  (nzOnConfirm)="deleteRelationAppItem(data, gData)"
                >删除</button>
              </td>
            </tr>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>

<!-- S 分类编辑 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isVisible"
  [nzTitle]="(modalItem ? '编辑' : '新增') + '分类'"
  (nzOnCancel)="isVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>名称</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请输入名称!">
            <input
              nz-input
              placeholder="请输入名称"
              formControlName="name"
            />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>状态</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请选择状态!">
            <nz-radio-group formControlName="state">
              <label nz-radio [nzValue]="0">启用</label>
              <label nz-radio [nzValue]="1">禁用</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="submitClassLoading" (click)="submitForm()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 分类编辑 -->

<!-- S 游戏添加 -->
<game-select-app
  [(ngModel)]="isSelectVisible"
  modalTitle="关联"
  [appIds]="addGameIds"
  [extraParams]="{
    type: editGameItems.id
  }"
  (selectedEmit)="submitGameData($event)"
></game-select-app>
<!-- E 游戏添加 -->